<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="<%=path%>/static/jq/jquery-3.6.0.js"></script>
<script src='<c:url value="/static/bootstrap4.6.0/js/bootstrap.js"/>'></script>
<link href="<%=path%>/static/bootstrap4.6.0/css/bootstrap.css" rel="stylesheet">    

<html>
<head>
    <title>订单</title>
    <style>
        #svg{
            position: relative;
            left: 500px;
            bottom: 10px;

        }
    </style>
</head>
<body>
<div class="page-container text-center">
    <h4 class="mt-4 mb-4">所有订单</h4><a class="btn btn-success" href="${pageContext.request.contextPath}/goods/getAllByPage">返回商品页面</a>
    <a id="svg" class="btn btn-outline-info" href="javascript:;" onclick="gotoCart('${orders[0].userName}')"><svg class="bi bi-cart4" width="2em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l.5 2H5V5H3.14zM6 5v2h2V5H6zm3 0v2h2V5H9zm3 0v2h1.36l.5-2H12zm1.11 3H12v2h.61l.5-2zM11 8H9v2h2V8zM8 8H6v2h2V8zM5 8H3.89l.5 2H5V8zm0 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
    </svg></a>

    <table class="table text-center">
        <form id="form" action="" method="get">

            <thead>
            <tr>
                <td>订单编号</td>
                <td hidden>用户ID</td>
                <td>商品名</td>
                <td>收货人</td>
                <td>下单时间</td>
                <td>收货地址</td>
                <td>单价</td>
                <td>数量</td>
                <td>总金额</td>
                <td>电话</td>
                <td>订单状态</td>
                <td>操作</td>
            </tr>
            </thead>


            <tbody>


            <c:forEach items="${orders}" var="one">
                <tr id="o_${one.orderId}">
                    <td class="orderId" hidden>${one.orderId}</td>
                    <td class="orderNum">${one.orderNum}</td>
                    <td class="userId" hidden>${one.userId}</td>
                    <td class="goodsName">${one.goodsName}</td>
                    <td class="userName">${one.userName}</td>
                    <td class="orderTime">${one.orderTime}</td>
                    <td class="address">${one.address}</td>
                    <td class="price">${one.price}</td>
                    <td class="number">${one.number}</td>
                    <td class="totalPrice">${one.totalPrice}</td>
                    <td class="phone">${one.phone}</td>
                    <td class="status">${one.status}</td>
                    <td>
                        <a class="btn btn-link" href="javascript:;" onclick="operation(${one.orderId})">详情</a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
            <tfoot>

            </tfoot>
        </form>
    </table>
</div>
<script>
    function gotoCart(username) {
        location.href = "${pageContext.request.contextPath}/user/shop/cart?username=" + username;

    }
    function deleteOrder() {
        $.ajax({
            url:"${pageContext.request.contextPath}/user/shop/deleteOne",
            method: "get",
            data: {
                orderId:$("#orderId").val()
            },
            success:function (data) {
                if (data=="ok"){
                    alert("取消成功!")
                    window.location.reload();
                }else{
                    alert("操作失败!")
                    window.location.reload();
                }
            }
        })
    }
    function updateStatus() {
        $.ajax({
            url:"${pageContext.request.contextPath}/user/shop/updateStatus",
            method:"get",
            data:{
                status: $("#status").val(),
                orderId: $("#orderId").val(),
            },
            success:function (data) {
                if(data=="payOK"){
                    alert("支付成功!")
                    window.location.reload();
                }else if(data=="shOK"){
                    alert("收货成功!")
                    window.location.reload();
                }else if(data=="tk"){
                    alert("正在退款中!")
                    window.location.reload();
                }else {
                    alert("失败")
                    window.location.reload();
                }

            }



        })
    }
    function operation(id) {
        $("#orderDetails").modal("show");

        $("#orderNum").val($("#o_"+id+" .orderNum").text());
        $("#userId").val($("#o_"+id+" .userId").text());
        $("#orderId").val($("#o_"+id+" .orderId").text());
        $("#orderTime").val($("#o_"+id+" .orderTime").text());
        $("#address").val($("#o_"+id+" .address").text());
        $("#username").val($("#o_"+id+" .username").text());
        $("#phone").val($("#o_"+id+" .phone").text());
        $("#status").val($("#o_"+id+" .status").text());
        $("#totalPrice").val($("#o_"+id+" .totalPrice").text());
        if ($("#o_"+id+" .status").text()== "未支付"){
            document.getElementById("zf").style.display='inline';
            document.getElementById("qx").style.display='inline';
            document.getElementById("tk").style.display='none';
            document.getElementById("tkth").style.display='none';
            document.getElementById("qrsh").style.display='none';

        }else if ($("#o_"+id+" .status").text()== "已付款"){
            document.getElementById("zf").style.display='none';
            document.getElementById("qx").style.display='none';
            document.getElementById("tk").style.display='inline';
            document.getElementById("tkth").style.display='none';
            document.getElementById("qrsh").style.display='none';

        }else if($("#o_"+id+" .status").text()== "已发货"){
            document.getElementById("zf").style.display='none';
            document.getElementById("qx").style.display='none';
            document.getElementById("tk").style.display='none';
            document.getElementById("tkth").style.display='inline';
            document.getElementById("qrsh").style.display='inline';

        }else {
            document.getElementById("zf").style.display='none';
            document.getElementById("qx").style.display='none';
            document.getElementById("tk").style.display='none';
            document.getElementById("tkth").style.display='none';
            document.getElementById("qrsh").style.display='none';

        }

    }
</script>

<!-- Modal 订单详情-->
<div id="orderDetails" class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">订单详情</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <div class="form-group">
                    <div class="text-sm-left">
                        <input type="hidden" id="orderId" name="orderId" >
                        <input type="hidden" id="userId" name="userId" >
                        订单编号:<input type="text" name="orderNum" id="orderNum" class="border-0 " readonly><br>
                        下单时间:<input type="text" name="orderTime" id="orderTime" class="border-0 " readonly><br>
                        收货地址:<input type="text" name="address" id="address" class="border-0 " readonly><br>
                        收货人:<input type="text" name="username" id="username" class="border-0 " readonly><br>
                        联系电话:<input type="text" name="phone" id="phone" class="border-0 " readonly><br>
                        订单状态:<input type="text" name="status" id="status" class="border-0 " readonly><br>
                        总金额:<input type="text" name="totalPrice" id="totalPrice" class="border-0 " readonly>
                    </div>
                </div>
                <div class="text-center text-info">请核对您的收货地址,联系电话,总金额是否正确？</div>

            </div>
            <div class="modal-footer">

                <button id="qx" type="button" class="btn btn-secondary" onclick="deleteOrder()">取消订单</button>
                <button id="zf" type="button" class="btn btn-primary" onclick="updateStatus()">支付</button>
                <button id="tk" type="button" class="btn btn-primary" onclick="updateStatus()">退款</button>
                <button id="qrsh" type="button" class="btn btn-primary" onclick="updateStatus()">确认收货</button>
                <button id="tkth" type="button" class="btn btn-primary" onclick="">退款退货</button>
            </div>
        </div>
    </div>
</div>



</body>

</html>
